<template>
	<div class="form-table-panel-wrapper">
		<rk-grid
			ref="gridRef"
			title="表单列表"
			dataUrl="/prdFormInfo/queryPrdFormInfoPageList"
			:params="gridQueryParams"
			:columns="gridColumns"
			:autoLoad="false"
			:boxConfig="true"
		>
			<template #toolbar_title_buttons>
				<el-select v-model="gridQueryParams.status" placeholder="请选择状态" class="mr-12" clearable style="width: 200px" @change="handleSearch">
					<el-option v-for="item in COMMON_STOP_OPEN_ENUMS.options" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
				<el-input v-model="gridQueryParams.keyWords" placeholder="请输入名称/编码" style="width: 250px" @blur="handleSearch" clearable> </el-input>
			</template>
			<template #operation="{ row }">
				<div class="operation-box">
					<el-button type="primary" link @click.stop="handleOperate('edit', row)">设计</el-button>
					<el-button type="primary" link @click.stop="handleOperate('preview', row)">预览</el-button>
					<el-button type="primary" link @click.stop="handleOperate('copy', row)">复制</el-button>
				</div>
			</template>
			<template #status="{ row }">
				<el-tag :type="COMMON_STOP_OPEN_ENUMS.options[row.status].tagType">
					{{ COMMON_STOP_OPEN_ENUMS.options[row.status].echo }}
				</el-tag>
			</template>
		</rk-grid>
		<RkFormPreview ref="rkFormPreviewRef" />
		<RkFormDesigner ref="rkFormDesignRef" @save="handleSearch()" />
	</div>
</template>

<script setup>
import { useFormListApi } from '@/api';
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import { RkConfirmBox } from '@/components/message-box/index.js';
import { COMMON_STOP_OPEN_ENUMS } from '@/enums/enums-common.js';
import { RkFormDesigner, RkFormPreview } from '@/components/designer';

const { delPrdFormInfo, updateStatus, copyPrdFormInfo } = useFormListApi();

const props = defineProps({
	// 类型节点数据
	typeNode: { type: Object },
});

// 表格Ref对象
const gridRef = ref(null);
// 表格字段定义
const gridColumns = reactive([
	{
		field: 'status',
		title: '状态',
		width: 120,
		align: 'center',
		cellRender: { name: 'enumsRender', enumName: 'COMMON_STOP_OPEN_ENUMS', isTag: true },
	},
	{ field: 'name', title: '名称', align: 'left',width: 350,  headerAlign: 'center' },
	{ field: 'code', title: '编码', align: 'left', width: 300, headerAlign: 'center' },
	// { field: 'formTypeName', title: '模板类型', align: 'center', width: 150, headerAlign: 'center' },
	{ field: 'createTime', title: '创建时间', width: 200, showOverflow: true, align: 'center' },
	{ field: 'operation', title: '操作', width: 150, showOverflow: true, align: 'center', slots: { default: 'operation' } },
]);
// 表格查询参数
const gridQueryParams = reactive({
	status: undefined,
	keyWords: undefined,
});

/**查询 */
const handleSearch = () => {
	const { typeNode } = props;
	gridQueryParams['formType'] = typeNode ? typeNode.code : '';
	gridRef.value.searchEvent();
};
/**重新获取数据 */
const handleReset = () => {
	gridQueryParams.keyWords = null;
	gridQueryParams.status = null;
	gridRef.value.resetEvent();
};
const btnTypeEnums = {
	open: { text: '启用', status: 1 },
	stop: { text: '停用', status: 0 },
	delete: { text: '删除', status: 1 },
};
const rkFormDesignRef = ref(null);
const rkFormPreviewRef = ref(null);
// 新建
const handleAdd = () => {
	const { typeNode } = props;
	if (typeNode && typeNode.children && typeNode.children.length) {
		ElMessage({ message: '请选择一个底级节点再进行操作！', type: 'warning' });
	} else {
		rkFormDesignRef.value.handleOpen({ formType: typeNode.code, formTypeName: typeNode.name });
	}
};
// 编辑
const handleEdit = (row) => {
	rkFormDesignRef.value.handleOpen({ ...row });
};
// 复制
const handleCopy = async ({ formId, name }) => {
	const params = { formId: formId };
	const result = await copyPrdFormInfo(params);
	const { data, code, msg } = result;
	if (code === 200) {
		ElMessage({ message: '复制[' + name + ']成功', type: 'success' });
		handleSearch();
	} else {
		ElMessage({ message: `${msg}`, type: 'error' });
	}
};
// 预览
const handlePreview = (row) => {
	rkFormPreviewRef.value.handleOpen(row);
};

// 启用 停用 删除
const handleMultipleSelect = (type) => {
	const selectRows = gridRef.value.getCheckboxRecords();
	if (!(selectRows && selectRows.length)) {
		ElMessage({ message: '请至少选择一条数据进行操作！', type: 'warning' });
		return;
	}
	if (selectRows) {
		const typeName = btnTypeEnums[type].text;
		const typeStatus = btnTypeEnums[type].status;
		RkConfirmBox({
			title: '提示',
			content: `您确定要${typeName}吗？`,
			onSubmit: async function () {
				const formIds = selectRows.map((item) => item.formId).join(',');
				const params = { formIds, status: typeStatus };
				let result = { code: 1 };
				if (type === 'delete') {
					result = await delPrdFormInfo(params);
				} else {
					result = await updateStatus(params);
				}
				const { code, msg } = result;
				if (code === 200) {
					ElMessage({ message: `${typeName}成功！`, type: 'success' });
					handleSearch();
				} else {
					ElMessage({ message: `${msg}`, type: 'error' });
				}
			},
			onCancel: function () {},
		});
	}
};

// 通用操作方法
const handleOperate = (type, ...params) => {
	switch (type) {
		case 'add':
			handleAdd(...params);
			break;
		case 'edit':
			handleEdit(...params);
			break;
		case 'copy':
			handleCopy(...params);
			break;
		case 'open':
			handleMultipleSelect(type, ...params);
			break;
		case 'stop':
			handleMultipleSelect(type, ...params);
			break;
		case 'delete':
			handleMultipleSelect(type, ...params);
			break;
		case 'preview':
			handlePreview(...params);
			break;
		default:
			break;
	}
};
defineExpose({
	handleSearch,
	handleOperate,
});
</script>

<style lang="scss" scoped>
.form-table-panel-wrapper {
	width: 100%;
	height: 100%;
}
.operation-box {
	display: flex;
	justify-content: space-around;
}
</style>
